<template>
    <div>
        <div class="menu">
            <h2>注册豆瓣</h2>
            <p>新手机号将自动注册,请详读<span style="color: greenyellow;">豆瓣使用协议,豆瓣个人信息保护政策</span></p>
            <div>
                <van-form @submit="onSubmit">
                    <van-cell-group inset>
                        <van-field v-model="username" name="userName" label="账号" placeholder="手机号/邮箱"
                            :rules="[{ required: true, message: '请填写用户名' }]" />
                        <van-field v-model="password" type="password" name="passWord" label="密码" placeholder="密码"
                            :rules="[{ required: true, message: '请填写密码' }]" />
                    </van-cell-group>
                    <div style="margin: 16px;">
                        <van-button round block type="primary" native-type="submit" @click="dj">
                            注册
                        </van-button>
                    </div>
                </van-form>
                <p style="text-align: center;color: #ccc;margin-top: 80px;">第三方登录</p>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { showToast } from 'vant';
const username = ref('');
const password = ref('');

const dj = (values) => {
    if (username.value == 'admin' && password.value == '123456') {
        localStorage.setItem('token','qwertyuiopsfgyhsadebcfg')
        showToast('登录成功');
    }else{
        showToast('账号或密码错误');
    }
};
</script>

<style lang="scss" scoped>
.menu {
    width: 300px;
    height: 400px;

    h2 {
        text-align: center;
    }
}
</style>